<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
  <div id="box">
    {{content}}
    <hr>
    <!--
      注意 v-show语法
      1.v-show可以控制元素的显示和隐藏,其原理是display:block||none
      2.v-show可以识别布尔值,同样可以识别表达式
    -->
    <h1 v-show="true">{{content}}</h1>
    <hr>
    <!--
      注意 v-if语法
      1.v-if同样可以控制元素的显示和隐藏,但是是在dom树上remove和append元素
      2.v-if会导致dom树导致重绘,影响性能
      3.v-if可以识别布尔值,同样可以识别表达式
    -->

    <!--如果是频繁的触发元素的显示隐藏,使用v-show,反之可以使用v-if-->
    <!--num<9为表达式,是有结果的-->
    <h1 v-if="num<9">{{content1}}</h1>
    <hr>
     <h1>if条件渲染指令</h1>
    <h2 v-if="num<9">num小于9</h2>
    <h2 v-else-if="num===9">num等于9</h2>
    <h2 v-else>num大于9</h2>
  </div>
  <script>
    new Vue({
      el: '#box',
      data: {
        content: 'hello Vue',
        flag: true,
        content: '我是v-show显示隐藏',
        content1: '我是v-if显示隐藏',
        num: 10,
      }
    })
  </script>
</body>

</html>